
<template>
  <div class="app-container" v-if="showLine">
  <el-divider content-position="center">计划产品信息</el-divider>
  <el-card shadow="always" class="box-card">
    <el-row :gutter="10" class="mb8" >
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="selectPlanProduct"
          v-if="optType == 'save' || optType == 'edit'"
          v-hasPermi="['pro:outsourcingorder:add']"
        >新增</el-button>
      </el-col>
    </el-row>

    <el-table border v-loading="loading" :data="lineList" >
      <el-table-column label="计划编号" align="center" prop="planCode" />
      <el-table-column label="产品编号" align="center" prop="productCode" >
        <!--            <template slot-scope="scope">
                      <el-button size="mini" type="text" @click="handleInfoView(scope.row)">{{ scope.row.productCode }}</el-button>
                    </template>-->
      </el-table-column>
      <el-table-column label="产品名称" align="center" prop="productName" />
      <el-table-column label="规格型号" align="center" prop="specification" />
      <el-table-column label="单位" align="center" prop="unitOfMeasure" />
      <el-table-column v-if="outsourceType=='G'" label="工序编号" align="center" prop="processCode" />
      <el-table-column v-if="outsourceType=='G'" label="工序名称" align="center" prop="processName" />

      <!--
                <el-table-column label="预估单价" align="center" prop="price" >
                  <template slot-scope="scope">
                    <el-input
                      type="text"
                      size="mini"
                      v-model="scope.row.price"
                      v-if="scope.row.updateStatus"
                      @blur="getTotalPrice(scope.row)"
                    >
                    </el-input>
                    <span   v-else>{{scope.row.price}}</span>
                  </template>
                </el-table-column>-->
      <el-table-column label="需求数量" align="center" prop="productQuantity" >
        <template slot-scope="scope">
          <el-input-number
            :min="0.1"
            :step="0.01"
            :precision="2"
            type="number"
            size="mini"
            v-model="scope.row.productQuantity"
            v-if="(optType == 'save' || optType == 'edit')"
          />

          <span v-else>{{scope.row.productQuantity}}</span>
        </template>
      </el-table-column>
      <!--          <el-table-column label="预估产品总价" align="center" prop="totalCost" />-->
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        v-if="optType == 'save' || optType == 'edit' || optType == 'select'">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="optType == 'select' && scope.row.status == 0"
            @click="handleSelectLine(scope.row)"
          >选择</el-button>
<!--          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="(optType=='save'||optType=='edit')&&!scope.row.updateStatus"
            @click="handleUpdateLine(scope.row)"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="(optType=='save'||optType=='edit')&&scope.row.updateStatus"
            @click="handleSaveLine(scope.row)"
          >确定</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-if="(optType=='save'||optType=='edit')&&scope.row.updateStatus"
            @click="handleCancelLine(scope.row)"
          >取消</el-button>-->
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            v-if="(optType == 'save' || optType == 'edit')"
            @click="handleDeleteLine(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

  </el-card>
    <!--选择商品信息弹出框-->
    <ItemSelect ref="itemSelect" item-or-product="PRODUCT" @onSelected="onItemSelected" > </ItemSelect>
  </div>

</template>

<style scoped>

</style>

<script>
import ItemSelect from "@/components/itemSelect/single.vue";
import BomSelectSingle from "@/components/mdBomSelect/single.vue";
import Template from "@/views/print/printtemplate/list.vue";
import {getPlan, listLine} from "@/api/mes/pro/outsourcingplan";

export default {
  name: "PlanLineForOrder",
  components: {Template, BomSelectSingle, ItemSelect},
  dicts: ['erp_payment_type'],
  props: {
    showPlanLine:{
      type: Boolean,
      default: true
    },
    planLineList:{
      type: Array,
      default: () => []
    },
    planNumber: {
      type: String,
      default: null
    },
    editStatus: {
      type: String,
      default: 'view'
    },
    outsourceType:{
      type: String,
      default: 'Z'
    }
  },
  data() {
    return {
      showLine: true,
      oldRow: {},
      lineList: this.planLineList,
      autoGenFlag: false,
      optType: this.editStatus,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 外协计划表格数据
      planList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      queryParams: {
        pageNum: 1,
        pageSize: 100,
        productCode: null,
        productName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        planNo: [
          {required: true, message: "计划编号不能为空", trigger: "blur"}
        ], deadline: [
          {required: true, message: "需求截止日期不能为空", trigger: "blur"}
        ],
      }
    };
  },
watch: {
  planLineList:{
    handler(newValue, oldValue) {

      this.lineList = newValue;
    },
  },
  editStatus:{
    handler(newValue, oldValue) {
      this.optType = newValue;
    },
  },
},
  methods: {
    handleSelectLine(row){
      row.status = 1;
      this.$emit("selectLine", row);
    },
    /** 新增产品按钮操作 */
    handleAddLine() {

    },
    selectPlanProduct(){
      this.$refs.itemSelect.showFlag = true;
    },
    handleSaveLine(row) {
      row.updateStatus = false;
      this.$emit("lineChange", this.lineList);
    },
    handleCancelLine(row) {
      row.productQuantity = this.oldRow.productQuantity;
      row.price = this.oldRow.price;
      row.totalCost = this.oldRow.totalCost;
      row.updateStatus = false;
    },
    /** 修改按钮操作 */
    handleUpdateLine(row) {
      this.oldRow.productQuantity = row.productQuantity;
      this.oldRow.price = row.price;
      this.oldRow.totalCost = row.totalCost;
      row.updateStatus = true;
    },
    handleDeleteLine(row) {
      this.$modal.confirm('是否确认删除这个产品吗？').then(() => {
        this.lineList.splice(this.lineList.indexOf(row), 1);
        this.$emit("lineChange", this.lineList);
      });
    },
    //物料选择弹出框
    onItemSelected(obj) {
      let one = this.lineList.find(item => item.productCode === obj.itemCode);
      if (one) {
        this.$modal.msgError("该产品已添加");
        return;
      }
      let data = {
        productId: obj.itemId,
        productCode: obj.itemCode,
        productName: obj.itemName,
        specification: obj.specification,
        unitOfMeasure: obj.unitOfMeasure,
        price: obj.referencePrice,
        status: obj.status,
        productQuantity: null,
        totalCost: null,
        updateStatus: true,
      }
      this.lineList.push(data);
    },
  }
}
</script>
